<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <style>
    .active {
      background-color: red;
    }
  </style>
  <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
  <div id="box">
    <ul>
      <!-- diff算法 只渲染变化了的key对应的数据 -->
      <li v-for="(data,index) in datalist" key="data">
        {{data}}--{{index}}
      </li>
    </ul>

    <ul>
      <li v-for="(data,index) of datalist">
        {{data}}--{{index}}
      </li>
    </ul>

    <ul>
      <li v-for="(value,key) in obj">
        {{key}}:{{value}}
      </li>
    </ul>

    <ul>
      <li v-for="(data,key) of obj">
        {{data}}--{{key}}
      </li>
    </ul>

    <ul>
      <li v-for="n in 10">
        {{n}}
      </li>
    </ul>

  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: "#box",
      data: {
        datalist: ["111", "222", "333"],
        obj: {
          name: "wholeegg",
          age: 100,
          location: "guangzhou"
        }
      }
    })

  </script>

</body>

</html>